﻿@{
    ViewData["Title"] = "Info";
}
@model User;

<h2 style="margin-top: 50px;">个人主页</h2>
<div class="row" >
    <div class="col-md-4">
        <div style="width: 132px;">
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="upload-avatar" src="@Model.Avatar" style="width: 100%; height: 150px;">
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <form class="dropzone" method="post" action="@Url.Action("SaveInfo", "User")">
            <input type="hidden" name="avatar" id="data-avatar" value="@Model.Avatar">
            <!-- 用户信息 -->
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" class="form-control" name="username" id="username" value="@Model.Username" disabled="disabled" readonly>
            </div>
            <div class="form-group">
                <label for="nickname">昵称</label>
                <input type="text" class="form-control" name="nickname" id="nickname"  value="@Model.Nickname">
            </div>
            <div class="form-group">
                <label for="role">权限</label>
                <input type="text" class="form-control" id="role" value="@(Model.Role == 1 ? "普通用户" : "其他")" disabled="disabled" readonly>
            </div>
            <button type="submit" class="btn btn-primary">保存修改</button>
        </form>
    </div>
</div>


@section Scripts
{
    <link href="~/lib/layui/css/layui.css" rel="stylesheet">
    <script src="~/lib/layui/layui.js"></script>
    <script>
    layui.use(function(){
        var upload = layui.upload;
        var uploadInst = upload.render({
            elem: '#upload-avatar',
            url: '@Url.Action("UploadFiles", "Home")', // 实际使用时改成您自己的上传接口即可。
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#upload-avatar').attr('src', result); // 图片链接（base64）
                });
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
                var id = '#' + this.id.replace("upload", "data");
                console.log(id);
                $(id).val(res.path);
            },
            error: function(){
            },
            // 进度条
            progress: function(n, elem, e){
                // element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            },
            accept: "images"
        });
    });
</script>
}
